$paddingSide: 50px;
$paddingVertical: 40px;

// 帖子详情
.com-article-main {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: $paddingVertical $paddingSide;

  .com-article-main_header {
    .com-article-main_title {
      display: flex;
      justify-content: flex-start;
      align-items: center;
      margin-bottom: 15px;

      .category {
        background-color: #4CD7E8;
        color: white;
        padding: 2px 6px;
        margin-right: 10px;
      }

      .title {
        flex: 1;
        font-size: 22px;
        font-weight: bold;
        margin: 0;
      }

      .right {
        color: #CCC;
        cursor: pointer;

        &:hover {
          color: red;
        }
      }
    }

    .com-article-main_info {
      background-color: #F7F8FC;
      display: flex;
      justify-content: space-between;
      color: #999;
      padding: 10px 15px;
      margin-bottom: 20px;

      .info_sector {
        .organ {
          color: #FFAA00;
        }
      }

      .info_data {
        color: #CCC;

        .unit {
          &:not(:last-child) {
            margin-right: 30px;
          }
        }
      }
    }

    .com-article-main_updatetime {
      color: #CCC;
      text-align: center;
      margin-bottom: 25px;

      .slash {
        margin: 0px 15px;
        user-select: none;
      }
    }
  }

  .com-article-main_content {
    flex: 1;

    .content {
      width: 100%;
      height: 100%;
      line-height: 1.5em;
      color: #666;
      border: none;
      font-family: inherit;
      font-size: 16px;
      white-space: pre-wrap;
      word-wrap: break-word;
      resize: none;
      cursor: inherit;

      p {
        margin: 0;
      }

      * {
        width: 100%;
        max-width: 650px;
      }

      video, iframe {
        height: 430px;
      }
    }

    .tags {
      margin-top: 50px;
      font-size: 12px;
      color: #666;

      .tag {
        border: 1px solid #CCC;
        border-radius: 4px;
        background-color: #F5F5F5;
        padding: 1px 6px 2px 5px;

        &:not(:last-child) {
          margin-right: 6px;
        }
      }
    }
  }

  .com-article-main_footer {
    border-top: 1px solid #F0F0F0;
    display: flex;
    justify-content: center;
    margin-top: 30px;
    padding-top: 40px;

    .viewer-oper {
      display: flex;
      align-items: center;

      &:not(:last-child) {
        margin-right: 120px;
      }

      cursor: pointer;

      .icon {
        width: 28px;
        height: 28px;
        margin-right: 10px;
      }
    }
  }
}

// 发表评论
.com-article-reply {
  padding: 30px $paddingSide;

  .com-article-reply_header {
    color: #CCC;
    margin-bottom: 15px;
  }

  .com-article-reply_textarea {
    padding: 0px 0px 30px;

    textarea {
      border-radius: 4px;
      color: #666;
      padding: 10px 10px 24px;
    }
  }

  .com-article-reply_handle {
    text-align: right;

    .button {
      outline: none;
      border: 1px solid #00C3FF;
      border-radius: 4px;
      background-color: #00C3FF;
      color: white;
      font-weight: bold;
      padding: 5px 25px;
      cursor: pointer;
      transition: 0.3s all;

      &:hover {
        background-color: #00D5FF;
      }
    }
  }
}

// 评论列表
.com-article-reply-list {
  .pagination {
    text-align: center;
    padding: 10px 0;
  }

  .reply-box {
    width: 100%;

    &:not(:last-child) {
      border-bottom: 1px solid #EBEBEB;
    }

    display: flex;
    justify-content: flex-start;
    padding: 24px 50px;

    .reply-box_side {
      margin-right: 20px;

      .reply-box_avatar {
        width: 50px;
        height: 50px;
        border: 1px solid #999;
        border-radius: 50%;
        background-size: cover;
      }
    }

    .reply-box_main {
      flex: 1;
      color: #666;

      .reply-box_replyer {
        .reply-box_replyer-info {
          display: flex;
          justify-content: flex-start;

          .info-nickname {
            margin-right: 10px;
          }

          .info-level {
            flex: 1;
          }

          .delete-comment {
            color: #CCC;
            cursor: pointer;

            &:hover {
              color: red;
            }
          }
        }

        .reply-box_replyer-floor {
          color: #CCC;
        }
      }

      .reply-box_content {
        padding: 20px 0px;

        .content {
          max-width: 580px;
          max-height: 600px;
          overflow: overlay;
          font-family: inherit;
          margin: 0;
          word-wrap: break-word;

          * {
            width: 100%;
            max-width: 580px;
          }

          p {
            margin: 0;
          }
        }
      }

      .reply-box_oper {
        color: #CCC;
        display: flex;
        justify-content: space-between;

        .slash {
          margin: 0px 10px;
          user-select: none;
        }

        .right {
          display: flex;
          align-items: center;
          user-select: none;

          .reply-for-reply {
            cursor: pointer;

            &:hover {
              color: #00C3FF;
            }
          }
        }
      }

      .reply-box_nested-reply {
        background-color: #F7F8FC;
        border-radius: 8px;
        padding: 15px;
        margin-top: 20px;

        .nested-reply_reply-action {
          padding: 0 0 10px 0;
          margin-bottom: 10px;
          border-bottom: 1px solid #DDD;
        }

        .nested-reply_reply-list {
          .nested-reply_reply-unit {
            margin-bottom: 10px;

            .reply-unit_header {
              display: flex;
              align-items: center;

              .header_avatar {
                width: 24px;
                height: 24px;
                border: 1px solid #CCC;
                border-radius: 50%;
                background-size: cover;
                margin-right: 8px;
              }

              .header_nickname {
                flex: 1;
                color: #00C3FF;
              }

              .header_delete {
                color: #CCC;
                cursor: pointer;

                &:hover {
                  color: red;
                }
              }
            }

            .reply-unit_content {
              padding-left: 32px;
              margin-top: 4px;

              * {
                margin: 0;
              }
            }

            .reply-unit_footer {
              text-align: right;
              display: flex;
              justify-content: flex-end;
            }
          }
        }

        .nested-reply_watch-more {
          text-align: center;
          color: #999;
          cursor: pointer;
        }

        .ant-modal-root {
          @extend .nested-reply_reply-list;

          .ant-modal-content {
            border-radius: 4px;

            .ant-modal-body {
              padding: 24px 50px;
            }

            .nested-reply_reply-unit {
              .reply-unit_header {
                .header_avatar {
                  width: 50px;
                  height: 50px;
                }
              }

              .reply-unit_content {
                padding-left: 58px;
              }
            }
          }
        }
      }
    }
  }
}
